<script>
export default {
	props: {
		tableList: {
			type: Array
		}
	},
	data() {
		return {
			/* 设备类型，网络连接方式， */
			deviceTypeList: [],
			networkMethodList: [],
		}
	},
	methods: {
		// 获取设备类型列表
		async queryDeviceTypeList() {
			let data = await this.$API.product.queryDeviceType()
			this.deviceTypeList = Object.freeze(data)
		},
		// 获取网络连接方式列表
		async queryNetworkMethodList() {
			let data = await this.$API.product.queryNetworkMethod()
			this.networkMethodList = Object.freeze(data)
		},

		// 格式化产品类型
		formatterDevType(deviceType) {
			let item = this.deviceTypeList.find((item) => item.dictSort === deviceType)
			return item.dictLabel
		},
		// 格式化联网方式
		formatterNetMethod(networkMethod) {
			let item = this.networkMethodList.find((item) => item.dictSort === networkMethod)
			return item.dictLabel
		},
	},
	created() {
		/* 设备类型，网络连接方式， */
		this.queryDeviceTypeList()
		this.queryNetworkMethodList()
	}
}
</script>

<template>
	<div class="box">
		<el-col v-for="item in tableList" :key="item.productId" :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
			<div class="product">
				<div class="pro-body">
					<div class="content">
						<div class="cont-head">
							<div class="title">
								<i class="el-icon-menu"></i>
								<h4>{{ item.productName }}</h4>
								<el-tag type="info" size="small">系统</el-tag>
							</div>
							<el-tooltip class="item" effect="dark" content="取消发布" placement="top-start">
								<el-tag effect="dark" :type="item.status === 2 ? 'success' : 'info'"
									:color="item.status === 2 ? '#13ce66' : '#909399'" size="small"> {{ item.status === 2 ? '已发布' : '未发布' }}
								</el-tag>
							</el-tooltip>
						</div>
						<div class="cont-body">
							<ul>
								<li>所属分类：<a href="javascript:;">{{ item.categoryName }}</a></li>
								<li>产品类型：<span>{{ formatterDevType(item.deviceType) }}</span></li>
								<li>联网方式：<span>{{ formatterNetMethod(item.networkMethod) }}</span></li>
								<li>设备授权：
									<el-tag :type="item.isAuthorize === 0 ? 'info' : 'success'" size="small">{{ item.isAuthorize === 0 ?
										'未启用' :
										'已启用' }}</el-tag>
								</li>
							</ul>
							<div class="pro-img">
								<template v-if="item.imgUrl">
									<img :src="mixinPrefixAdd(item.imgUrl)">
								</template>
								<template v-else>
									<img src="@/assets/images/product.png" v-if="item.deviceType === 1">
									<img src="@/assets/images/gateway.png" v-else-if="item.deviceType === 2">
									<img src="@/assets/images/video.png" v-else>
								</template>
							</div>
						</div>
					</div>
					<div class="handle">
						<el-button type="primary" size="small" icon="el-icon-view">详情</el-button>
						<el-button type="warning" size="small" icon="el-icon-search">查看设备</el-button>
					</div>
				</div>
			</div>
		</el-col>
	</div>
</template>


<style lang="less" scoped>
.product {
	width: 100%;
	height: 200px;
	padding: 10px 20px;
	margin-bottom: 20px;
	box-sizing: border-box;
	border-radius: 15px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	background: #fff;
	border: 1px solid #fff;
	overflow: hidden;

	.content {
		.cont-head {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				width: 80%;
				display: flex;
				align-items: center;

				.el-icon-menu {
					font-size: 15px;
					margin-right: 7px;
				}

				h4 {
					font-size: 15px;
					line-height: 32px;
					color: #333;
					white-space: nowrap;
				}

				.el-tag {
					margin-left: 7px;
					padding: 0px 3px;
					font-size: 12px;
				}
			}

			.el-tag--dark {
				cursor: pointer;
			}
		}

		.cont-body {
			display: flex;
			justify-content: space-between;

			ul {
				width: 55%;

				li {
					font-size: 12px;
					line-height: 22px;
					color: #666;
				}
			}

			.pro-img {
				width: 40%;
				height: 100px;
				overflow: hidden;

				img {
					min-width: 100%;
					height: 100%;
					text-align: center;
				}
			}
		}
	}

	.handle {
		padding-top: 10px;
		text-align: center;

		.el-button {
			margin-left: 1px;
			padding: 6px 10px;

			span {
				font-size: 12px;
			}
		}
	}
}
</style>